import { Button, Select, Input } from "antd";
import { useEffect } from "react";

const { Option } = Select;

/**
 * 消息队列分页查询条件组件
 * 优化了下拉框宽度，提升视觉协调性
 */
const MqSearch = (props) => {
    const {
        topicNames,
        setPaginationReq,
        pageMessageReq,
        setPageMessageReq,
        pageQueryMessage
    } = props;

    // 消费状态枚举映射
    const statusOptions = [
        { value: 0, label: "未消费" },
        { value: 1, label: "消费中" },
        { value: 2, label: "消费成功" },
        { value: 3, label: "消费失败" }
    ];

    // 初始化时确保Topic默认值为DEFAULT
    useEffect(() => {
        if (pageMessageReq.topic !== "DEFAULT") {
            setPageMessageReq(prev => ({ ...prev, topic: "DEFAULT" }));
        }
        // eslint-disable-next-line
    }, []);

    // Topic下拉框模糊匹配逻辑
    const handleTopicSearch = (inputValue, option) => {
        if (!option) return false;
        return option.children.toLowerCase().includes(inputValue.toLowerCase());
    };

    // 清空查询条件
    const handleClear = () => {
        setPageMessageReq({
            topic: "DEFAULT",
            messageId: "",
            status: 0
        });
        setPaginationReq({
            pageNum: 1,
            pageSize: 10
        });
    };

    return (
        <div style={{
            display: "flex",
            flexWrap: "wrap",
            gap: "20px",
            alignItems: "center",
            padding: "12px 0", // 增加上下内边距，提升整体呼吸感
        }}>
            {/* Topic下拉框（加宽至240px，适配更长的主题名） */}
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                <div style={{
                    color: '#4e5969',
                    fontSize: '14px',
                    fontWeight: 500,
                    whiteSpace: 'nowrap'
                }}>
                    Topic：
                </div>
                <div style={{ width: '240px' }}> {/* 从180px调整为240px */}
                    <Select
                        value={pageMessageReq.topic}
                        onChange={(value) => {
                            setPageMessageReq(prev => ({ ...prev, topic: value }));
                        }}
                        showSearch
                        filterOption={handleTopicSearch}
                        placeholder="请选择或搜索Topic"
                        style={{
                            height: '40px',
                            borderRadius: '6px',
                            borderColor: '#d9d9d9',
                            fontSize: '13px',
                            width: '100%' // 占满容器宽度
                        }}
                        notFoundContent="无匹配的Topic"
                    >
                        <Option key="DEFAULT" value="DEFAULT">DEFAULT</Option>
                        {topicNames && Array.from(new Set(topicNames)).map(topic => (
                            topic !== "DEFAULT" && (
                                <Option key={topic} value={topic}>
                                    {topic}
                                </Option>
                            )
                        ))}
                    </Select>
                </div>
            </div>

            {/* 消息ID输入框（保持原有宽度，作为参照基准） */}
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                <div style={{
                    color: '#4e5969',
                    fontSize: '14px',
                    fontWeight: 500,
                    whiteSpace: 'nowrap'
                }}>
                    消息id：
                </div>
                <div style={{ width: '400px' }}>
                    <Input
                        value={pageMessageReq.messageId}
                        onChange={(e) => {
                            setPageMessageReq(prev => ({ ...prev, messageId: e.target.value }));
                        }}
                        placeholder="请输入消息id"
                        style={{
                            height: '40px',
                            borderRadius: '6px',
                            borderColor: '#d9d9d9',
                            transition: 'all 0.3s ease',
                            fontSize: '13px'
                        }}
                        onFocus={(e) => {
                            e.target.style.borderColor = '#1890ff';
                            e.target.style.boxShadow = '0 0 0 2px rgba(24, 144, 255, 0.2)';
                        }}
                        onBlur={(e) => {
                            e.target.style.borderColor = '#d9d9d9';
                            e.target.style.boxShadow = 'none';
                        }}
                    />
                </div>
            </div>

            {/* 消费状态下拉框（加宽至180px，与整体比例协调） */}
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                <div style={{
                    color: '#4e5969',
                    fontSize: '14px',
                    fontWeight: 500,
                    whiteSpace: 'nowrap'
                }}>
                    消费状态：
                </div>
                <div style={{ width: '180px' }}> {/* 从150px调整为180px */}
                    <Select
                        value={pageMessageReq.status}
                        onChange={(value) => {
                            setPageMessageReq(prev => ({ ...prev, status: value }));
                        }}
                        placeholder="请选择消费状态"
                        style={{
                            height: '40px',
                            borderRadius: '6px',
                            borderColor: '#d9d9d9',
                            fontSize: '13px',
                            width: '100%' // 占满容器宽度
                        }}
                    >
                        {statusOptions.map(option => (
                            <Option key={option.value} value={option.value}>
                                {option.label}
                            </Option>
                        ))}
                    </Select>
                </div>
            </div>

            {/* 操作按钮区（保持不变，作为视觉平衡的终点） */}
            <div style={{ display: "flex", alignItems: "center", gap: "16px", marginLeft: "auto" }}>
                <Button
                    type={"primary"}
                    onClick={() => pageQueryMessage()}
                    style={{
                        height: '40px',
                        padding: '0 24px',
                        borderRadius: '6px',
                        backgroundColor: '#1890ff',
                        borderColor: '#1890ff',
                        fontSize: '14px',
                        fontWeight: 500,
                        transition: 'all 0.3s ease',
                        boxShadow: '0 2px 4px rgba(24, 144, 255, 0.2)'
                    }}
                    hoverStyle={{
                        backgroundColor: '#096dd9',
                        borderColor: '#096dd9',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 4px 8px rgba(24, 144, 255, 0.3)'
                    }}
                >
                    查询
                </Button>
                <Button
                    danger
                    onClick={handleClear}
                    style={{
                        height: '40px',
                        padding: '0 24px',
                        borderRadius: '6px',
                        backgroundColor: '#fff1f0',
                        color: '#cf1322',
                        borderColor: '#ffa39e',
                        fontSize: '14px',
                        fontWeight: 500,
                        transition: 'all 0.3s ease'
                    }}
                    hoverStyle={{
                        backgroundColor: '#fff1f0',
                        color: '#a8071a',
                        borderColor: '#ff7875',
                        transform: 'translateY(-2px)',
                        boxShadow: '0 4px 8px rgba(207, 19, 34, 0.2)'
                    }}
                >
                    清空条件
                </Button>
            </div>
        </div>
    );
};

export default MqSearch;